<style lang="scss" scoped></style>

<template>
  <div class="root-page">
    <div class="m-4 h-40 w-96 bg-blue-50">
      <canvas width="100%" height="100%" id="sign-canvas"></canvas>
    </div>
    <button class="btn-warning btn" @click="sign.undo()">撤回</button>
    <button class="btn-warning btn" @click="sign.clear()">clear</button>
    <button
      class="btn-success btn"
      @click="
        () => {
          base64 = sign.getPNG()
          $log(base64)
        }
      "
    >
      PNG
    </button>
    <img :src="base64" alt="" srcset="" />
  </div>
</template>

<script lang="ts" setup>
import signName from 'smooth-signature'

let sign: InstanceType<typeof signName>
const base64 = ref()
onMounted(() => {
  const canvas = document.querySelector('#sign-canvas') as HTMLCanvasElement
  sign = new signName(canvas, {
    height: 160,
    width: 384,
    scale: 1.2,
  })
})
</script>
